<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span{
            margin-right: 1rem
        }
        ul li {
            /* display: inline-block; */
            /* list-style-type: none */
        }
        #demo,.demo,.content .demo{
            border: 1px solid #eee;
            border-radius: 2px;
            padding: 25px 35px;
            margin-top: 1em;
            margin-bottom: 40px;
            font-size: 1.2em;
            line-height: 1.5em;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            overflow-x: auto;
        }
        .demo-alert-box{
            padding:10px 20px;
            background:#f3beb8;
            border:1px solid #f09898
        }
        .tab-button {
            padding: 6px 10px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border: 1px solid #ccc;
            cursor: pointer;
            background: #f0f0f0;
            margin-bottom: -1px;
            margin-right: -1px;
        }
        .tab-button:hover {
            background: #e0e0e0;
        }
        .tab-button.active {
            background: #e0e0e0;
        }
        .tab {
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <span v-once id="app">Message : {{msg}}</span>
    <span id = "app1">Use re...{{rawHtml}}</span>
    <span v-html="rawHtml" id="app2"></span>
    <div id="app3" v-bind:id="dynamicId">123</div>
    <button id="app4" v-bind:disabled="isButtonDisabled" type="button" style="background-color:blue;animation: zoomIn 0.2s cubic-bezier(0, .25, .08, 1) 0.4s; animation-fill-mode: backwards">change color</button>
    <span id="app5">{{ msg.split('').reverse().join('') }}</span>
    <span id="app6" v-if="seen">now you see me couse i let be</span>
    <a v-bind:href="url" id="app7">百度一下</a>
    <button id="app8" style="background-color: red" v-on:click.prevent="changeColor()">变色</button>
    <div id="app9">
        <p>The Array is: "{{array}}"</p>
        <p>and they addsNum is: "{{adds}}"</p>
    </div>
    <span id="app10">{{fullName}}</span>
    <span id="app11">{{fullName}}</span>
    <span id="app12">{{fullName}}</span>
    <div id="watch-example">
        <p>
            Ask a yes/no question:
            <input type="text" v-model="question">
        </p>
        <p>{{ answer }}</p>
        <img v-bind:src="img" alt="">
    </div>
    <div id="ClassAndStyle">
        <span v-bind:class="{active: isActive}">active</span>
        <span class="first" v-bind:class="{'text-danger' : hasError}">text-danger</span>
        <span class="second" v-bind:class="classObject">classObject</span>
        <span v-bind:class="classObj">classObj</span>
        <span v-bind:class="[activeClass,errorClass]">Active&Error</span>
        <span v-bind:class="[isActive?activeClass:'',errorClass]">isActive?</span>
        <span v-bind:class="[{ active: isActive }, errorClass]">active</span>
        <span v-bind:style="{color:rainbow,fontSize:bigSize + 'px'}">I'm rainbow</span>
        <span v-bind:style="styleObj"> little color</span>
        <p v-bind:style="[styleArr1,styleArr2]">let's see something awesome!</p>
        <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">What's happend?</div>
    </div>
    <div id="condition">
        <span v-if="isTrue">isTrue</span>
        <span v-else>isNotTrue</span>
        <template v-if="isTemplate">
            <header>
                 <!-- v-bind:style="{border:'3px solid #000',borderRadius:'5px',background-color:'#0ff',color:'#666'}" -->
                <nav>
                    <ul>
                        <li>number1</li>
                        <li>number2</li>
                        <li>number3</li>
                    </ul>
                </nav>
            </header>
        </template>
        <span v-if="typeA === 'A'">typeA</span>
        <span v-else-if="typeB === 'B'">typeB</span>
        <span v-else-if="typeC === 'C'">typeC</span>
        <span v-else>NOT ABC</span>
        <template v-if="loginType === 'username'">
            <label for="">Username</label>
            <input type="text" placeholder="Enter you username">
        </template>
        <template v-else>
            <label for="">email</label>
            <input type="text" placeholder="Enter you email address">
        </template>
        <button v-on:click="changeLogin()">Toggle login type</button>
        <template v-if="loginType === 'username'">
            <label for="">Username</label>
            <input type="text" placeholder="Enter you username" key="username-input">
        </template>
        <template v-else>
            <label for="">email</label>
            <input type="text" placeholder="Enter you email address" key="email-input">
        </template>
    </div>
    <div id="showHide">
        <span v-show="isShow">isShow</span>
    </div>    
    <ul id="exampleFor">
        <li v-for="item in items">{{item.message}}</li>
        <li v-for="(item,index) in items">{{parentMessage}} - {{index}} - {{item.message}}</li>
        <li v-for="item of items">{{item.message}}</li>
        <li v-for="value in object">{{value}}</li>
        <div v-for="(value,key) in object">{{key}} : {{value}}</div>
        <div v-for="(value,key,index) in object">{{index}} . {{key}} : {{value}}</div>
        <div v-for="item in items" :key="item.id">{{item.message}}</div>
    </ul>
    <div id="arrExample">
        <span >{{items}}</span>
    </div>
    <div id="objExample">
        <span>{{useProfile}}</span>
    </div>
    <ul id="even">
        <li v-for="n in evenNumbers">{{n}}</li>
        <li v-for="n in Even(numbers)">{{n}}</li>
        <div>
            <span v-for="n in 10">{{n}}</span>
        </div>
        <ul>
            <template v-for="item in items">
                <li>{{item.msg}}</li>
                <li class="divider" role="presentation"></li>
            </template>
        </ul>
        <li v-for="todo in todos" v-if="!todo.isComplete">{{todo}}</li>
        <ul v-if="todos.length">
            <li v-for="todo in todos">
                {{ todo }}
            </li>
        </ul>
        <p v-else>No todos left!</p>
        <div v-for="item in items" :key="item.id"></div>
        <div
            v-for="(item,index) in items"
            v-bind:item="item"
            v-bind:index="index"
            v-bind:key="item.id"
        ></div>
    </ul>
    
    <div id="todo-list-example">
        <form v-on:submit.prevent="addNewTodo">
            <label for="new-todo">Add a todo</label>
            <input
            v-model="newTodoText"
            id="new-todo"
            placeholder="E.g. Feed the cat"
            >
            <button>Add</button>
        </form>
        <ul>
            <li
            is="todo-item"
            v-for="(todo, index) in todos"
            v-bind:key="todo.id"
            v-bind:title="todo.title"
            v-on:remove="todos.splice(index, 1)"
            ></li>
        </ul>
    </div>
    <div id="event1">
        <button v-on:click="counter += 1">Add 1</button>
        <p>This button has been clicked {{counter}} times.</p>
    </div>
    <div id="event2">
        <button v-on:click="greet">Greet</button>
    </div>
    <div id="event3">
        <button v-on:click="say('hi')">Say hi</button>
        <button v-on:click="say('what')">Say what</button>
        <button v-on:click="warn('From cannot be submitted yet.',$event)">Submit</button>

        <!-- 阻止单击事件继续传播 -->
        <a v-on:click.stop="doThis"></a>

        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit"></form>

        <!-- 修饰符可以串联 -->
        <a v-on:click.stop.prevent="doThat"></a>

        <!-- 只有修饰符 -->
        <form v-on:submit.prevent></form>

        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
        <div v-on:click.capture="doThis">...</div>

        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <!-- 即事件不是从内部元素触发的 -->
        <div v-on:click.self="doThat">...</div>

        <!-- 点击事件将只会触发一次 -->
        <a v-on:click.once="doThis"></a>

        <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
        <!-- 而不会等待 `onScroll` 完成  -->
        <!-- 这其中包含 `event.preventDefault()` 的情况 -->
        <div v-on:scroll.passive="onScroll">...</div>
        <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
        <input v-on:keyup.13="submit">
        <!-- 同上 -->
        <input v-on:keyup.enter="submit">
        <!-- 缩写语法 -->
        <input @keyup.enter="submit">
        <img v-bind:src="img" alt="">
        <!-- 阻止单击事件继续传播 -->
        <a v-on:click.stop="doThis"></a>

        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit"></form>

        <!-- 修饰符可以串联 -->
        <a v-on:click.stop.prevent="doThat"></a>

        <!-- 只有修饰符 -->
        <form v-on:submit.prevent></form>

        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
        <div v-on:click.capture="doThis">...</div>

        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <!-- 即事件不是从内部元素触发的 -->
        <div v-on:click.self="doThat">...</div>

        <!-- <input @keyup.page-down="onPageDown"> -->

        <!-- Alt + C -->
        <input @keyup.alt.67="AC">

        <!-- Ctrl + Click -->
        <div @click.ctrl="CC">Do something</div>

        <!-- 有且只有 Ctrl 被按下的时候才触发 -->
        <button @click.ctrl.exact="onCtrlClick">A</button>

        <!-- 没有任何系统修饰符被按下的时候才触发 -->
        <button @click.exact="onClick">A</button>
    </div>

    <!--  -->
    <div id="form">
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
        <span>Multiline message is:</span>
        <p style="white-space: pre-line;">{{ message }}</p>
        <br>
        <textarea v-model="message" placeholder="add multiple lines"></textarea>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </div>
    <div id='example-3'>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
    </div>
    <div id="example-4">
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
    </div>
    <div id="example-5">
        <select v-model="selected">
            <option disabled value="">Select please </option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>
    <div id="example-6">
        <select v-model="selected" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <span>Selected: {{ selected }}</span>
    </div>
    <div id="example-7">
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>

    <!-- 当选中时，`picked` 为字符串 "a" -->
    <!-- <input type="radio" v-model="picked" value="a"> -->

    <!-- `toggle` 为 true 或 false -->
    <!-- <input type="checkbox" v-model="toggle"> -->

    <!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
    <select name="" id="" v-model="selected">
        <option value="abc">ABC</option>
    </select>

    <!-- <input type="checkbox" v-model="toggle" true-value="yes" false-value="no"> -->
    
    <!-- 在“change”时而非“input”时更新 -->
    <input v-model.lazy="msg">

    <!-- 组件基础 -->
    <div id="components-demo">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>

    <!-- 组建注册 -->
    <div id="components">
        <component-a></component-a>
        <component-b></component-b>
        <component-c></component-c>
        <component-aa></component-aa>
        <component-bb></component-bb>

    </div>

    <!-- <div id="blog-post-demo">
        <blog-post title="My journey with Vue"></blog-post>
        <blog-post title="Blogging with Vue"></blog-post>
        <blog-post title="Why Vue is so fun"></blog-post>
        <blog-post v-for="post in posts" v-bind:key:="post.id" v-bind:title="post.title"></blog-post>
    </div> -->

    <div id="blog-posts-events-demo">
        <div :style="{ fontSize : postFontSize + 'em'}">
            <blog-post
                v-for="post in posts"
                v-bind:key="post.id"
                v-bind:post="post"
                v-on:enlarge-text="postFontSize += $event"
                v-on:enlarge-text1="onEnlargeText"
            ></blog-post>
        </div>
    </div>

    <!-- 在组件上使用v-model -->
    <!-- <custom-input
        v-bind:value="searchText"
        v-on:input="searchText = $event"
    ></custom-input> -->
    <custom-input v-model="searchText"></custom-input>
    
    <!-- 通过插槽分发内容 -->
    <div id="slots-demo" class="demo">
        <alert-box>
            Something bad happened.
        </alert-box>
    </div>

    <!-- 动态组件 -->
    <div id="dynamic-component-demo" class="demo">
        <button
            v-for="tab in tabs"
            v-bind:key="tab"
            v-bind:class="['tab-button',{
        active:currentTab === tab}]"
            v-on:click="currentTab = tab"
        >{{ tab }}</button>
        <component
            v-bind:is="currentTabComponent"
            class="tab"
        ></component>
    </div>
    <my-component propA="1" propB="1" propC="1" propD="1"></my-component>

    <!-- 自定义事件 -->
    <base-input v-on:focus.native="onFocus"></base-input>


    <div id="imooc">
        <div>
            <input v-model="inputValue">
            <button v-on:click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item
                v-for="(item,index) of list"
                v-bind:key="index"
                v-bind:content="item"
                v-bind:index="index"
                v-on:delete="handleDelete"
            >
    
            </todo-item>

        </ul>

        <navigation-link url="/profile">
            Your Profile
        </navigation-link>
    </div>

    
    <script src="js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
    <script>
        // document.getElementById("app4").addEventListener('click',function (params) {
        //     if(this.style.backgroundColor == "blue"){
        //         this.style.backgroundColor = "red";
        //     }else{
        //         this.style.backgroundColor = "blue";
        //     }
        // })
        var app = new Vue({
            el:'#app',
            data: { msg: 1 }
        })
        var app1 = new Vue({
            el:'#app1',
            data:{
                rawHtml : '<span style="color:red">This text should be red!</span>'
            }
        })
        var app2 = new Vue({
            el:'#app2',
            data:{
                rawHtml : '<span style="color:red">This text should be red!</span>'
            }
        })
        var app3 = new Vue({
            el: '#app3',
            data:{
                dynamicId : 'a1'
            }
        })
        var app4 = new Vue({
            el: '#app4',
            data:{
                isButtonDisabled : true
            },
        })
        var app5 = new Vue({
            el: '#app5',
            data:{
                msg : 'asdfghjkl'
            }
        })
        var app6 = new Vue({
            el: '#app6',
            data:{
                seen : true 
            }
        })
        var app7 = new Vue({
            el: '#app7',
            data:{
                url : 'https://www.baidu.com'
            }
        })
        var app8 = new Vue({
            el: '#app8',
            data:{
                
            },
            methods:{
                changeColor : function () {
                   this.$el.style.backgroundColor == "blue"?this.$el.style.backgroundColor = "red" : this.$el.style.backgroundColor = "blue"
                }                
            }
        })
        var app9 = new Vue({
            el: '#app9',
            data:{
                array: [3,4]
            },
            computed:{
                adds :  function () {
                    let val = 0;
                    for(let i=0;i<this.array.length;i++){
                        val += this.array[i];
                    }
                    return val;
                }
            }
        })
        var app10 = new Vue({
            el: '#app10',
            data:{
                firstName: 'David',
                lastName: 'Beckham',
                fullName: 'David Beckham'
            },
            watch:{
                firstName : function (val){
                    this.fullName = val + '' + this.lastName;
                },
                lastName : function (val){
                    this.fullName = this.firstName + '' + val;
                }
            }
        })
        var app11 = new Vue({
            el: '#app11',
            data:{
                firstName:'Taylor ',
                lastName: 'Swift'
            },
            computed:{
                fullName: function (){
                    return this.firstName + '' + this.lastName;
                }
            }
        })
        var app12 = new Vue({
            el: '#app12',
            data:{
                firstName: 'Jay ',
                lastName: 'Chou'
            },
            computed:{
                fullName: {
                    get: function () {
                        return this.firstName + '' + this.lastName;
                    },
                    set: function (newValue) {
                        var names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[names.length-1];
                    }
                }
                
            }
        })
        var watchExampleVM = new Vue({
            el: "#watch-example",
            data:{
                question:'',
                answer: 'I cannot give you an answer until you ask a question!',
                img: ''
            },
            watch:{
                question: function (newQuestion,oldQuestion) {
                    this.answer = "Waiting for you to stop typing...";
                    this.debouncedGetAnswer()
                }
            },
            created: function (){
                this.debouncedGetAnswer = _.debounce(this.getAnswer, 500);
            },
            methods: {
                getAnswer: function(){
                    if(this.question.indexOf('?') === -1){
                        this.answer = 'Questions usually contain a question mark. ;-)';
                        return;
                    }
                    this.answer = 'Thinking...';
                    var vm = this;
                    axios.get('https://yesno.wtf/api')
                        .then(function (response){
                            vm.answer = _.capitalize(response.data.answer);
                            vm.img = response.data.image;
                        })
                        .catch(function (error){
                            vm.answer = 'Error! Could not reach the API. ' + error;
                        })
                }
            }
        })
        var ClassAndStyle = new Vue({
            el:"#ClassAndStyle",
            data: {
                isActive : true,
                hasError : true,
                error : null,
                activeClass : 'active',
                errorClass : 'text-error',
                rainbow : '#3234ab',
                bigSize: 28,
                classObject: {
                    classObj1: false,
                    'classObj2': true
                },
                styleObj: {
                    color: '#1f5a90',
                    background: '#ff0'
                },
                styleArr1 : {
                    fontSize : '30px',
                    backgroundColor: '#0ff'
                },
                styleArr2 : {
                    border : '3px solid #000',
                    borderRadius: '5px'
                }
            },
            computed:{
                classObj : function (){
                    return {
                        active: this.isActive && !this.error,
                        'text-danger': this.error && this.error.type === 'fatal'
                    }
                }
            }
        })
        var condition = new Vue({
            el:"#condition",
            data:{
                isTrue: true,
                isTemplate: true,
                typeA : 'AA',
                typeB : 'BB',
                typeC : 'C',
                loginType : 'username'
            },
            methods:{
                changeLogin : function (){
                    this.loginType === 'username' ? this.loginType = 'email' : this.loginType = 'username';
                }
            }
        })
        var showHide = new Vue({
            el:"#showHide",
            data:{
                isShow :  true
            }
        })
        var exampleFor = new Vue({
            el:"#exampleFor",
            data:{
                parentMessage : 'Parent',
                items:[
                    {message : "first"},
                    {message : "second"},
                    // {id : 'vFor'}
                ],
                object:{
                    firstName: 'David',
                    lastName : 'Beckham',
                    age : 37
                }
            }
        })
        var arrExample = new Vue({
            el:"#arrExample",
            data: {
                items : ['a','b','c']
            }
        })
        var objExample = new Vue({
            el:"#objExample",
            data: {
                useProfile:{
                    name : 'Jove'
                }
            }
        })
        var even = new Vue({
            el:"#even",
            data: {
                numbers: [1,2,4,5,3,6,9],
                items: [
                    {msg:2}
                ],
                todos: [3,6,23,12,35,9]
            },
            computed: {
                evenNumbers: function (){
                    return this.numbers.filter(function (number){
                        return number %2 === 0;
                    })
                }
                
            },
            methods:{
                Even: function(numbers){
                    return this.numbers.filter(function(number){
                        return number %2 === 0;
                    })
                }
            }
        })
        
        Vue.component('todo-item', {
            template: '\
                <li>\
                {{ title }}\
                <button v-on:click="$emit(\'remove\')">Remove</button>\
                </li>\
            ',
            props: ['title']
        })

        new Vue({
            el: '#todo-list-example',
            data: {
                newTodoText: '',
                todos: [
                {
                    id: 1,
                    title: 'Do the dishes',
                },
                {
                    id: 2,
                    title: 'Take out the trash',
                },
                {
                    id: 3,
                    title: 'Mow the lawn'
                }
                ],
                nextTodoId: 4
            },
            methods: {
                addNewTodo: function () {
                this.todos.push({
                    id: this.nextTodoId++,
                    title: this.newTodoText
                })
                this.newTodoText = ''
                }
            }
        })
        var event1 = new Vue({
            el:"#event1",
            data:{
                counter : 0
            }
        })
        var event2 = new Vue({
            el:"#event2",
            data:{
                name:'Vue.js'
            },
            methods:{
                greet:function (event){
                    alert("Hello " + this.name + " !");
                    if(event){
                        alert(event.target.tagName)
                    }
                }
            }
        })
        var event3 = new Vue({
            el:"#event3",
            data:{
                img:''
            },
            methods:{
                say: function (msg){
                    alert(msg);
                },
                warn: function (message,event){
                    if(event) event.preventDefault();
                    alert(message);
                },
                submit: function (){
                    var vm = this;
                    axios.get('https://yesno.wtf/api')
                    .then(function (response) {
                        vm.img = response.data.image;
                    })
                    .catch(function (error) {
                        alert(error);
                    })
                },
                AC: function() {
                    alert("You press the ALT & C button!");
                },
                CC: function (){
                    alert("You press the CTRL button and click your mouse left button!");
                },
                onCtrlClick:function (){
                    alert("Only press the CTRL and click your mouse left button can trige this alert!");
                },
                onClick:function (){
                    alert("Only press your mouse left button without any keyborad's button!");
                }
            }
        })
        
        /*全部的按键别名：
            .enter
            .tab
            .delete (捕获“删除”和“退格”键)
            .esc
            .space
            .up
            .down
            .left
            .right
        */
        // 可以使用 `v-on:keyup.f1`
        
        Vue.config.keyCodes.f1 = 112;
        
        //$event.key === 'PageDown';
        
        /*系统修饰键
            .ctrl
            .alt
            .shift
            .meta
        */
        
        /*鼠标按钮修饰符
            .left
            .right
            .middle
        */

        //表单的输入与绑定
        var form = new Vue({
            el:"#form",
            data:{
                message:'',
                checked:false
            },
            watch:{
                message:function (val){
                    this.message = val;
                }
            },
            methods:{
                
            }
        })
        
        new Vue({
            el: '#example-3',
            data: {
                checkedNames : []
            }
        })

        new Vue({
            el: '#example-4',
            data:{
                picked:''
            }
        })

        new Vue({
            el: '#example-5',
            data:{
                selected:''
            }
        })

        new Vue({
            el: '#example-6',
            data:{
                selected:[],
            }
        })
        
        new Vue({
            el: '#example-7',
            data:{
                selected: 'A',
                options: [
                    { text: 'One', value: 'A' },
                    { text: 'Two', value: 'B' },
                    { text: 'Three', value: 'C' }
                ]
            }
            // methods:{
            //     toggle:function(){
            //         var vm = this;
            //         // 当选中时
            //         vm.toggle === 'yes';
            //         // 当没有选中时
            //         vm.toggle === 'no';
            //     }
            // }
        })

        /*表单修饰符
            .lazy
            .number
            .trim
        */

        /* 组件基础 */

        Vue.component('button-counter',{
            data: function () {
                return {
                    count : 0
                }
            },
            template : '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
        })
        new Vue({ el:'#components-demo' })


        /* 组件注册 */

        //全局
        Vue.component('component-a',{
            data:function () {
                return{
                    count : 10
                }
            },
            template:`<div v-if="count>1">
                        <button v-on:click="count--">Now the count is {{ count }} .</button>
                    </div>
                    <div v-else-if="count == 1">
                        <button>Now the count is only{{ count }} .</button>
                    </div>`
        })
        Vue.component('component-b', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: `<div v-if="count == 0">
                            <button v-on:click="count++">Don't press me.</button>
                        </div>
                        <div v-else-if="count == 1">
                            <button v-on:click="count++">I said,DON'T press me again!</button>
                        </div>
                        <div v-else-if="count == 2">
                            <button v-on:click="count++">Final time I warn YOU!</button>
                        </div>
                        <div v-else-if="count == 3">
                            <h1 style="color:red">SURPRISE MOTHER FUCKER!</h1>
                        </div>`
        })
        Vue.component('component-c', {
            data: function () {
                return {
                    count: 10
                }
            },
            template: `<div v-if="count>1 && count<20">
                            <button v-on:click="count++">Now the count is {{ count }} .</button>
                        </div>
                        <div v-else-if="count == 20">
                            <button>Now the count is enough.</button>
                        </div>`
        })

        //局部
        var ComponentA = {
            data: function (){
                return {
                    count: 0
                };
            },
            template: `<button v-on:click="count++">俺は無敵だ & {{ count }}</button>`
        }
        //局部注册组件在其子组件中使用
        var ComponentB = {
            components:{
                'component-bb' : ComponentA
            },
            data: function (){
                return {
                    count: 0
                };
            },
            template: `<button v-on:click="count++">{{ count }}</button>`
        }
        new Vue({
            el: '#components',
            components:{
                'component-aa': ComponentA,
                'component-bb': ComponentB
            }
        })
        
        //通过 Prop 向子组件传递数据
        // Vue.component('blog-post',{
        //     props: ['title'],
        //     template : '<h3>{{ title }}</h3>'
        // })
        // new Vue({
        //     el: '#blog-post-demo',
        //     data:{
        //         posts:[
        //             {id: 1,title: 'My journey with Vue'},
        //             {id: 2,title: 'Blogging with Vue'},
        //             {id: 3,title: 'Why Vue is so fun'}
        //         ]
        //     }
        // })
        
        //单个根元素
        // Vue.component('blog-post',{
        //     props:['post'],
        //     template:`
        //         <div class="blog-post">
        //             <h3>{{ post.title }}</h3>
        //             <div v-html="post.content"></div>
        //         </div>
        //     `
        // })
        
        Vue.component('blog-post',{
            props:['post'],
            template:`
                <div class="blog-post">
                    <h3>{{ post.title }}</h3>
                    <button v-on:click="$emit('enlarge-text',0.1)">
                        Enlarge text
                    </button>
                    <button v-on:click="$emit('enlarge-text1',0.1)">
                        Enlarge text1
                    </button>
                    <div v-html="post.content"></div>
                </div>
            `
        })
        //通过事件向父级组件发送消息
        new Vue({
            el: '#blog-posts-events-demo',
            data: {
                posts: [
                    {id: 1,title: 'My journey with Vue',content:'...content...'},
                    {id: 2,title: 'Blogging with Vue',content:'...content...'},
                    {id: 3,title: 'Why Vue is so fun',content:'...content...'},
                ],
                postFontSize: 1
            },
            methods: {
                onEnlargeText: function (enlargeAmount){
                    this.postFontSize += enlargeAmount;
                }
            }
        })
        
        //在组件上使用v-model
        Vue.component('custom-input',{
            props:['value'],
            template:`
                <input 
                    v-bind:value="value"
                    v-on:input="$emit('input',$event.target.value)"
                >
            `
        })

        //通过插槽分发内容
        Vue.component('alert-box',{
            template:`
                <div class="demo-alert-box">
                    <strong>Error!</strong>
                    <slot></slot>
                </div>
            `
        })
        new Vue({
            el:'#slots-demo',
            data:{}
        })

        //动态组件
        Vue.component('tab-home',{
            template:'<div>Home component</div>'
        })
        Vue.component('tab-posts',{
            template:'<div>Posts component</div>'
        })
        Vue.component('tab-archive',{
            template:'<div>Archive component</div>'
        })

        new Vue({
            el:'#dynamic-component-demo',
            data:{
                currentTab:'Home',
                tabs:['Home','Posts','Archive']
            },
            computed:{
                currentTabComponent:function (){
                    return 'tab-' + this.currentTab.toLowerCase()
                }
            }
        })
        
        //Prop验证
        Vue.component('my-component', {
            props: {
                // 基础的类型检查 (`null` 匹配任何类型)
                propA: Number,
                // 多个可能的类型
                propB: [String, Number],
                // 必填的字符串
                propC: {
                    type: String,
                    required: true
                },
                // 带有默认值的数字
                propD: {
                    type: Number,
                    default: 100
                },
                // 带有默认值的对象
                propE: {
                    type: Object,
                    // 对象或数组默认值必须从一个工厂函数获取
                    default: function () {
                        return { message: 'hello' }
                    }
                },
                // 自定义验证函数
                propF: {
                    validator: function (value) {
                        // 这个值必须匹配下列字符串中的一个
                        return ['success', 'warning', 'danger'].indexOf(value) !== -1
                    }
                }
            }
        })
        
        /* 类型检查 
            String
            Number
            Boolean
            Array
            Object
            Date
            Function
            Symbol
        */
        
        // function Person (firstName,lastName){
        //     this.firstName = firstName;
        //     this.lastName = lastName;
        // }
        
        // Vue.component('blog-post',{
        //     props:{
        //         author:Person
        //     }
        // })

        //自定义事件

        Vue.component('base-input', {
            inheritAttrs: false,
            props: ['label', 'value'],
            computed: {
                inputListeners: function () {
                var vm = this
                // `Object.assign` 将所有的对象合并为一个新对象
                return Object.assign({},
                    // 我们从父级添加所有的监听器
                    this.$listeners,
                    // 然后我们添加自定义监听器，
                    // 或覆写一些监听器的行为
                    {
                    // 这里确保组件配合 `v-model` 的工作
                    input: function (event) {
                        vm.$emit('input', event.target.value)
                    }
                    }
                )
                }
            },
            template: `
                <label>
                {{ label }}
                <input
                    v-bind="$attrs"
                    v-bind:value="value"
                    v-on="inputListeners"
                >
                </label>
            `
        })
        
        Vue.component('todo-item',{
            props: ['content','index'],
            template : '<li v-on:click="handleClick">{{content}}</li>',
            methods: {
                handleClick : function() {
                    this.$emit('delete',this.index)
                }
            }
        })
        
        var nav = {
            template : `<a
                            v-bind:href="url"
                            class="nav-link"
                        >
                            <slot></slot>
                        </a>`
        }
        new Vue({
            el:"#imooc",
            component:{
                'navigation-link':nav
            },
            data:{
                inputValue:'',
                list:[]
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                },
                handleDelete:function(index){
                    this.list.splice(index,1);
                }
            }
            
        })
        
    </script>
    
</body>
</html>